<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .father {
        width: 300px;
        height: 300px;
        background-color: pink;
        margin: 100px auto;
    }

    .son {
        width: 200px;
        height: 200px;
        background-color: purple;
    }
</style>
<body>
<div class="father">
    <div class="son"></div>
</div>

<script>
    var father = document.querySelector('.father');
    var son = document.querySelector('.son');

    /**
     * 当鼠标移动到元素上时就会被触发 mouseenter 事件
     * 类似 mouseover, 它们两者之间的差别是
     * mouseover 鼠标经过自身盒子会触发, 经过子盒子还会触发.
     * mouseenter 只会经过自身盒子触发
     * 原因: mouseenter 不会冒泡
     *      跟 mouseenter 搭配, 鼠标离开 mouseleave 同样不会冒泡
     * #
     * 测试方式
     * 在子盒子与父盒子之间来回切换, mouseover -> 切换一次会触发一次, mouseenter -> 不会触发
     */
    father.addEventListener('mouseenter', function () {
        console.log(`mouseenter: 111`)
    })

    father.addEventListener('mouseover', function () {
        console.log(`mouseover: 222`)
    })
</script>
</body>
</html>
